import Column from "@/components/HfTable/compt/column.vue";
import { utilParseTime } from "@/assets/utils";
const ITablePTableOptColumnCommon: IStdOSetRightItem[] = [
  { type: "text", tip: "标签", key: "label", propKey: ["column"], label: "label", editType: "normalProp" },
  { type: "text", tip: "列value", key: "prop", propKey: ["column"], label: "prop", editType: "normalProp" },
  { type: "text", tip: "固定 可取left | right 和boolean", key: "fixed", propKey: ["column"], label: "fixed", editType: "prop" },
  { type: "text", tip: "列宽", key: "width", propKey: ["column"], label: "width", editType: "normalProp" },
  { type: "radio", tip: "隐藏", key: "hide", propKey: ["column"], label: "hide", editType: "prop" },
  { type: "radio", tip: "不算合计,需和cTableOpt.summary一起使用", key: "noSum", propKey: ["column"], label: "noSum", editType: "prop" },
  { type: "text", tip: "需要后端排序", key: "sortable", propKey: ["column"], label: "sortable", editType: "prop" }
  // { type: "text", tip: "", propKey: ["column", "children"], label: "children", editType: "prop" }
];
function handleTableItem(registerConfig: registerConfigFnType<IStdOTableItemDrag>) {
  return (tableItemOpt: IStdOTableItemDrag ) => {
    // tableItemOpt.middleOpt.props.column.hasHeader = true;
    registerConfig.register(tableItemOpt);
  };
}
export default function initContainer(registerConfig: registerConfigFnType<IStdOTableItemDrag>) {
  const tableItemRegister = handleTableItem(registerConfig);
  tableItemRegister({
    key: "tableItem-protoProp",
    type: "tableItem",
    leftOpt: { label: "展示props", preview: <div>展示props</div> },
    // @ts-ignore 必会传入column
    middleOpt: { render: <Column />, props: { column: { label: "展示props", prop: "tableItem-protoProp" } } },
    rightOpt: {
      settingRender: ITablePTableOptColumnCommon
    }
  });
  tableItemRegister({
    key: "tableItem-img",
    type: "tableItem",
    leftOpt: { label: "图片单张展示", preview: <img style={{ height: "50px" }} src="https://img2.baidu.com/it/u=3913729461,3658245748&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" /> },
    // @ts-ignore 必会传入column
    middleOpt: { render: <Column />, props: { column: { label: "图片单张展示", render: "img", prop: "tableItem-img" } } },
    rightOpt: {
      settingRender: [...ITablePTableOptColumnCommon, { type: "text", tip: "图片样式", key: "style", propKey: ["column", "style"], label: "style", editType: "normalProp" }]
    }
  });
  tableItemRegister({
    key: "tableItem_Viewimg",
    type: "tableItem",
    leftOpt: {
      label: "图片多张展示",
      preview: (
        <div>
          <img style={{ height: "50px", marginRight: "10px" }} src="https://img2.baidu.com/it/u=3913729461,3658245748&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" />
          <img style={{ height: "50px" }} src="https://img2.baidu.com/it/u=3913729461,3658245748&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" />
        </div>
      )
    },
    // @ts-ignore 必会传入column
    middleOpt: { render: <Column />, props: { column: { label: "图片多张展示", render: "img", prop: "tableItem_Viewimg" } } },
    rightOpt: {
      settingRender: [...ITablePTableOptColumnCommon, { type: "text", tip: "图片样式", key: "style", propKey: ["column"], label: "style", editType: "normalProp" }]
    }
  });
  tableItemRegister({
    key: "tableItem_long",
    type: "tableItem",
    leftOpt: {
      label: "long",
      preview: (
        <div
          style={{
            display: "-webkit-box",
            "-webkit-box-orient": "vertical",
            "-webkit-line-clamp": "2",
            overflow: "hidden"
          }}
        >
          "太长了我会换行并且省略的哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦噢噢噢噢"
        </div>
      )
    },
    // @ts-ignore 必会传入column
    middleOpt: { render: <Column />, props: { column: { label: "long", render: "long", prop: "tableItem_long" } } },
    rightOpt: {
      settingRender: ITablePTableOptColumnCommon
    }
  });
  tableItemRegister({
    key: "tableItem_params",
    type: "tableItem",
    leftOpt: {
      label: "params",
      preview: <div>我会根据props展示Object里面对应的值</div>
    },
    // @ts-ignore 必会传入column
    middleOpt: { render: <Column />, props: { column: { label: "params", render: "params", prop: "tableItem_params", Object: [{ id: "tableItem_params", name: "小明" }] } } },
    rightOpt: {
      settingRender: [
        ...ITablePTableOptColumnCommon,
        {
          type: "valueKeyList",
          tip: "props的键值对",
          propKey: ["column"],
          label: "Object",
          editType: "normalProp",
          key: "Object",
          valueKeyList: [
            { type: "text", tip: "key", key: "name", propKey: ["column", "Object"], label: "key", editType: "prop" },
            { type: "text", tip: "value", key: "id", propKey: ["column", "Object"], label: "value", editType: "prop" }
          ]
        }
      ]
    }
  });
  tableItemRegister({
    key: "tableItem_timeStamp",
    type: "tableItem",
    leftOpt: {
      label: "展示时间",
      preview: <div>{utilParseTime(1698310674432)}</div>
    },
    // @ts-ignore 必会传入column
    middleOpt: { render: <Column />, props: { column: { label: "展示时间", render: "timeStamp", prop: "tableItem_timeStamp" } } },
    rightOpt: {
      settingRender: [...ITablePTableOptColumnCommon, { type: "text", key: "timeStamp", tip: "时间格式:y-年,m-月,d-日,h-时,i-分,s-秒,a-周", propKey: ["column"], label: "timeStamp", editType: "normalProp" }]
    }
  });
  // tableItemRegister({
  //   key: "tableItem_others",
  //   type: "others",
  //   leftOpt: {
  //     label: "others",
  //     preview: "<div>我是html</div>"
  //   },
  //   middleOpt: { render: <Column />, props: { column: { label: "其他类型", render: "others", prop: "tableItem_others" } } },
  //   rightOpt: {
  //     settingRender: [...ITablePTableOptColumnCommon, { type: "text", tip: "时间格式", propKey: ["column", "timeStamp"], label: "timeStamp", editType: "prop" }]
  //   }
  // });
}
